<template>
  <div class="login-container">
    <!-- 背景动画效果 -->
    <div class="background-squares">
      <div v-for="n in 10" :key="n" class="square"></div>
    </div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <div class="card-header">
        <img src="@/assets/images/logo.png" alt="Logo" class="logo">
        <h2>欢迎回来</h2>
        <p class="subtitle">今天也要元气满满哦 ~</p>
      </div>
      
      <!-- 添加登录方式切换 -->
      <div class="login-type-switch">
        <span 
          :class="['switch-item', { active: loginType === 'account' }]"
          @click="loginType = 'account'"
        >
          密码登录
        </span>
        <span 
          :class="['switch-item', { active: loginType === 'phone' }]"
          @click="loginType = 'phone'"
        >
          验证码登录
        </span>
      </div>

      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <!-- 账号密码登录表单 -->
        <template v-if="loginType === 'account'">
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              placeholder="用户名/邮箱"
              :prefix-icon="User"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              :prefix-icon="Lock"
              @keyup.enter="handleLogin"
            />
          </el-form-item>
        </template>

        <!-- 手机验证码登录表单 -->
        <template v-else>
          <el-form-item prop="phone">
            <el-input
              v-model="loginForm.phone"
              placeholder="请输入手机号"
              :prefix-icon="Iphone"
            />
          </el-form-item>
          
          <el-form-item prop="code">
            <div class="code-input">
              <el-input
                v-model="loginForm.code"
                placeholder="请输入验证码"
                :prefix-icon="Message"
              />
              <el-button 
                class="send-code-btn"
                :disabled="cooldown > 0"
                @click="sendCode"
              >
                {{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </template>

        <!-- 记住密码只在账号密码登录时显示 -->
        <div v-if="loginType === 'account'" class="remember-forgot">
          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
          <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>
        
        <!-- 在登录按钮前添加 -->
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        
        <div class="third-party-login">
          <el-tooltip content="QQ登录" placement="top">
            <div class="login-icon qq" @click="thirdPartyLogin('qq')">
              <i class="fab fa-qq"></i>
            </div>
          </el-tooltip>
          <el-tooltip content="微信登录" placement="top">
            <div class="login-icon wechat" @click="thirdPartyLogin('wechat')">
              <i class="fab fa-weixin"></i>
            </div>
          </el-tooltip>
          <el-tooltip content="Gitee登录" placement="top">
            <div class="login-icon gitee" @click="thirdPartyLogin('gitee')">
              <svg class="gitee-icon" viewBox="0 0 1024 1024" width="20" height="20">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#C71D23"></path>
                <path d="M771.168 455.136H495.2a20.8 20.8 0 0 0-20.864 20.864v65.728c0 11.52 9.344 20.864 20.864 20.864h171.072c11.52 0 20.864 9.344 20.864 20.864v13.184c0 37.568-30.72 68.288-68.288 68.288H370.688a20.8 20.8 0 0 1-20.864-20.864V361.408c0-37.568 30.72-68.288 68.288-68.288h352.992c11.52 0 20.864-9.344 20.864-20.864v-65.728a20.8 20.8 0 0 0-20.864-20.864H418.112c-112.64 0-204.8 92.16-204.8 204.8v392.832c0 11.52 9.344 20.864 20.864 20.864h345.216c93.952 0 171.072-77.12 171.072-171.072V476c0-11.52-9.344-20.864-20.864-20.864z" fill="#FFFFFF"></path>
              </svg>
            </div>
          </el-tooltip>
          <el-tooltip content="Github登录" placement="top">
            <div class="login-icon github" @click="thirdPartyLogin('github')">
              <i class="fab fa-github"></i>
            </div>
          </el-tooltip>
        </div>
        
        <el-button
          type="primary"
          class="login-button"
          :loading="loading"
          @click="handleLogin"
        >
          登录
        </el-button>
        
        <div class="register-link">
          还没有账号？
          <el-link
            type="primary"
            :underline="false"
            @click="$router.push('/register')"
          >
            立即注册
          </el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock, Iphone, Message } from '@element-plus/icons-vue'

const router = useRouter()
const loading = ref(false)
const loginType = ref('account') // 登录方式：account 或 phone
const cooldown = ref(0) // 验证码冷却时间

const loginForm = reactive({
  account: '',
  password: '',
  phone: '',
  code: '',
  remember: false
})

const loginRules = {
  account: [
    { required: true, message: '请输入用户名/邮箱', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
  ]
}

// 发送验证码
const sendCode = async () => {
  if (!loginForm.phone) {
    ElMessage.warning('请先输入手机号')
    return
  }
  
  // 这里添加发送验证码的逻辑
  cooldown.value = 60
  const timer = setInterval(() => {
    cooldown.value--
    if (cooldown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  ElMessage.success('验证码已发送')
}

const handleLogin = async () => {
  loading.value = true
  try {
    // 根据不同登录方式处理登录逻辑
    if (loginType.value === 'account') {
      // 账号密码登录
      console.log('账号密码登录', loginForm.account, loginForm.password)
    } else {
      // 手机验证码登录
      console.log('手机验证码登录', loginForm.phone, loginForm.code)
    }
    
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('登录成功！')
    router.push('/')
  } catch (error) {
    ElMessage.error('登录失败，请重试')
  } finally {
    loading.value = false
  }
}

// 添加第三方登录处理函数
const thirdPartyLogin = (type) => {
  ElMessage({
    message: `${type}登录功能开发中...`,
    type: 'info'
  })
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.background-squares .square {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  animation: square-animation 20s infinite;
}

.background-squares .square:nth-child(odd) {
  width: 60px;
  height: 60px;
}

.background-squares .square:nth-child(even) {
  width: 100px;
  height: 100px;
}

@keyframes square-animation {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
  }
}

.login-card {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 1;
  position: relative;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

.login-form {
  margin-top: 20px;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.login-button {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  margin: 20px 0;
  font-size: 16px;
}

.register-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* 为背景方块生成随机位置 */
@for $i from 1 through 10 {
  .background-squares .square:nth-child(#{$i}) {
    left: #{random(100)}vw;
    top: #{random(100)}vh;
    animation-delay: -#{random(20)}s;
  }
}

/* 深色模式适配 */
html.dark {
  .login-card {
    background: rgba(30, 30, 30, 0.9);
  }
  
  .card-header h2 {
    color: #fff;
  }
  
  .subtitle {
    color: #999;
  }
  
  .register-link {
    color: #999;
  }
}

.login-type-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  
  .switch-item {
    padding: 8px 24px;
    cursor: pointer;
    color: #666;
    position: relative;
    transition: all 0.3s;
    
    &.active {
      color: var(--el-color-primary);
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background-color: var(--el-color-primary);
      }
    }
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.code-input {
  display: flex;
  gap: 12px;
  
  .el-input {
    flex: 1;
  }
  
  .send-code-btn {
    width: 120px;
  }
}

/* 深色模式补充 */
html.dark {
  .login-type-switch .switch-item {
    color: #999;
    
    &.active {
      color: var(--el-color-primary);
    }
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.divider {
  position: relative;
  text-align: center;
  margin: 20px 0;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background-color: var(--el-border-color-lighter);
  }
  
  &::before {
    left: 0;
  }
  
  &::after {
    right: 0;
  }
  
  span {
    background-color: var(--el-bg-color);
    padding: 0 10px;
    color: var(--el-text-color-secondary);
    font-size: 12px;
  }
}

.third-party-login {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  
  .login-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    
    i {
      font-size: 24px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &.qq {
      color: #12B7F5;
      &:hover {
        background: #12B7F5;
        color: white;
      }
    }
    
    &.wechat {
      color: #07C160;
      &:hover {
        background: #07C160;
        color: white;
      }
    }
    
    &.gitee {
      color: #C71D23;
      &:hover {
        background: #C71D23;
        color: white;
      }
    }
    
    &.github {
      color: #24292F;
      &:hover {
        background: #24292F;
        color: white;
      }
    }
    
    .gitee-icon {
      width: 24px;
      height: 24px;
    }
  }
}

/* 深色模式适配 */
html.dark {
  .divider {
    span {
      background-color: var(--el-bg-color-overlay);
    }
  }
  
  .third-party-login {
    .login-icon {
      background: var(--el-bg-color-overlay);
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
